<!--  -->
<template>
  <div class="item-form" v-if="!globalLoading">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="1">
        <ArticleBase :system="system" :article="article" :categories="categories" :resetImageList="resetImageList" :isSetUecontent="isSetUecontent" ref="articlebase"/>
      </el-tab-pane>
      <el-tab-pane label="文件信息" name="2">
        <ArticleFile ref="articletFile" :system="system" :article="article"
          :resetFileList="resetFileList" />
      </el-tab-pane>
      <el-tab-pane label="SEO信息" name="3">
        <ItemSeoSystemForm :system="system" :seo="article.seo" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ArticleBase from '@/components/main/user/system/article/item/form/ArticleBase.vue'
import ArticleFile from '@/components/main/user/system/article/item/form/ArticleFile.vue'
import ItemSeoSystemForm from '@/components/main/user/system/common/ItemSeoSystemForm.vue'
export default {
  props: {
    categories: {
      type: Object
    },
    sluges: {
      type: Object
    },
    system: {
      type: Object
    },
    article: {
      type: Object
    },
    globalLoading: {
      type: Boolean
    },
    resetImageList: {
      type: Function
    },
    contentChange: {
      type: Function
    },
    categoryTreeShow: {
      type: Function
    },
    slugTreeShow: {
      type: Function
    },
    isSetUecontent: {
      type: Boolean
    },
    resetFileList: {
      type: Function
    }
  },
  data () {
    return {
      // 折叠板显示控制，默认显示第一个
      activeName: '1'
    }
  },
  methods: {
    current (num) {
      return !(this.activeName.indexOf(num) === -1)
    },
    getContent () {
      return this.$refs['articlebase'].getContent()
    },
    getCustomLink () {
      let itemCustomLinkInfo = this.$refs['articlebase'].getCustomLink()
      if (!itemCustomLinkInfo.bool) {
        this.activeName = '1'
      }
      return itemCustomLinkInfo
    },
    gotoFirst () {
      this.activeName = '1'
    }
  },
  components: {
    ArticleBase,
    ArticleFile,
    ItemSeoSystemForm
  }
}

</script>
<style scoped lang="scss">
.item-form /deep/ .el-tabs__header .el-tabs__nav-wrap {
  padding-left: 30px;
}
.item-form /deep/ .el-tabs__header .el-tabs__item {
  font-size: 16px;
  padding:0 30px;
}
.item-form /deep/ .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 0;
}
.item-form /deep/ .el-tabs__header .el-tabs__item:last-child {
  padding-right: 0;
}
.item-form /deep/ .el-tabs__content {
  padding-top:15px;
}
.item-form .el-collapse {
  border-top: 0;
}
.item-form .el-collapse-item .el-collapse-item__header > .icon {
  font-size: 18px;
  position: relative;
  top: -2px;
}
.item-form .item-title {
  display: inline-block;
  margin-left: 2px;
  font-size: 16px;
}
.item-form .open-color {
  color: #409eff;
}
.item-form /deep/ .el-form-item{
  margin-bottom: 15px;
}
</style>
